<template>
<!--登录组件区域-->
    <div class="login_content">
        <!--登录盒子-->
        <div class="login_box">
            <!--头像-->
            <div class="avatar_box">
                <img src="../assets/logo.png" alt="">
            </div>
            <!--登录表单区域-->
            <el-form ref="loginForm" :model="loginform" :rules="formRule" label-width="0px" class="login_form">
                <!--用户名-->
                <el-form-item prop="username">
                    <el-input v-model="loginform.username" prefix-icon="iconfont icon-user"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item prop="password">
                    <el-input v-model="loginform.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
                </el-form-item>
                <!--按钮-->
                <el-form-item class="bnts">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="restForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            //登录表单绑定的数据对象
            loginform:{
                username:'',
                password:''
            },
            //表单验证规则
            formRule:{
                username:[
                    {required:true ,message:'请输入用户名',trigger:'blur'},
                    {min:3,max:10,message:'长度在3 到10个字符之间',trigger:'blur'}
                ],
                password:[
                    {required:true ,message:'请输入密码',trigger:'blur'},
                    {min:6,max:12,message:'长度在6 到12个字符之间',trigger:'blur'}
                ]
        }
        }
        
    },
    methods:{
        //点击重置按钮，重置表单数据
        restForm(){
            // console.log(this);
            this.$refs.loginForm.resetFields()
        },
        // 登录
        login(){
            // 登录前表单预验证
            this.$refs.loginForm.validate(async valid=>{
                //如果验证错误则返回
                if(!valid) return;
                // 验证错误则发送请求
                const {data:res}=await this.$http.post('login',this. loginform)
                if(res.meta.status!==200) return this.$message.error(res.meta.msg)
                this.$message({
                    message: '登录成功',
                    type: 'success'
                });
                //登录成，保存token到客户端 sessionStorage
                window.sessionStorage.setItem('token',res.data.token)
                //通过编程时导航跳转到主页面
                this.$router.push("home")
            })
        }
    }
}
</script>
<style scoped>
    .login_content{
        background-color: #2b5b6b;
        height: 100%;
    }
    /* 登录盒子 */

.login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}


/* 头像 */

.avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
}


/* 头像图片 */

.avatar_box img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
}


/* 登录表单区域 */

.login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.bnts {
    /* 弹性模型 */
    display: flex;
    justify-content: flex-end;
}
</style>